<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交互式平行板电容器物理模拟器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }

        .container {
            display: flex;
            height: 100vh;
            gap: 20px;
            padding: 20px;
        }

        .panel {
            background: rgba(255, 255, 255, 0.95);
            border-radius: 15px;
            padding: 25px;
            box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
            backdrop-filter: blur(8px);
            border: 1px solid rgba(255, 255, 255, 0.18);
        }

        .control-panel {
            flex: 0 0 300px;
            overflow-y: auto;
        }

        .animation-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        .info-panel {
            flex: 0 0 350px;
            overflow-y: auto;
        }

        h2 {
            color: #4a5568;
            margin-bottom: 20px;
            font-size: 1.5em;
            border-bottom: 2px solid #667eea;
            padding-bottom: 10px;
        }

        .control-group {
            margin-bottom: 20px;
        }

        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #2d3748;
        }

        input[type="range"] {
            width: 100%;
            margin-bottom: 10px;
            -webkit-appearance: none;
            height: 8px;
            border-radius: 5px;
            background: #e2e8f0;
            outline: none;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #667eea;
            cursor: pointer;
        }

        .value-display {
            text-align: center;
            font-size: 1.1em;
            color: #667eea;
            font-weight: bold;
        }

        #capacitor-canvas {
            border: 2px solid #4a5568;
            border-radius: 10px;
            background: #f7fafc;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }

        .physics-display {
            background: #f7fafc;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
        }

        .physics-item {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            padding: 10px;
            background: white;
            border-radius: 5px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .physics-label {
            font-weight: bold;
            color: #4a5568;
        }

        .physics-value {
            color: #667eea;
            font-weight: bold;
        }

        .formula-box {
            background: #edf2f7;
            padding: 15px;
            border-radius: 10px;
            margin-top: 20px;
            font-family: 'Courier New', monospace;
            font-size: 0.9em;
            line-height: 1.6;
        }

        .formula-title {
            font-weight: bold;
            color: #2d3748;
            margin-bottom: 10px;
        }

        .legend {
            position: absolute;
            top: 10px;
            right: 10px;
            background: rgba(255, 255, 255, 0.9);
            padding: 10px;
            border-radius: 5px;
            font-size: 0.8em;
        }

        .legend-item {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
        }

        .legend-color {
            width: 20px;
            height: 3px;
            margin-right: 8px;
        }

        .tooltip {
            position: absolute;
            background: rgba(0, 0, 0, 0.8);
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.8em;
            pointer-events: none;
            z-index: 1000;
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 参数调节区 -->
        <div class="panel control-panel">
            <h2>参数调节</h2>
            
            <div class="control-group">
                <label for="charge">极板带电量 (μC)</label>
                <input type="range" id="charge" min="0.1" max="10" step="0.1" value="1">
                <div class="value-display" id="charge-value">1.0 μC</div>
            </div>

            <div class="control-group">
                <label for="area">极板面积 (cm²)</label>
                <input type="range" id="area" min="10" max="200" step="10" value="100">
                <div class="value-display" id="area-value">100 cm²</div>
            </div>

            <div class="control-group">
                <label for="distance">极板间距 (mm)</label>
                <input type="range" id="distance" min="1" max="20" step="0.5" value="5">
                <div class="value-display" id="distance-value">5.0 mm</div>
            </div>

            <div class="control-group">
                <label for="dielectric">电介质介电常数 (εᵣ)</label>
                <input type="range" id="dielectric" min="1" max="10" step="0.1" value="1">
                <div class="value-display" id="dielectric-value">1.0</div>
            </div>

            <div class="legend">
                <div class="legend-item">
                    <div class="legend-color" style="background: #ff6b6b;"></div>
                    <span>正电荷</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background: #4ecdc4;"></div>
                    <span>负电荷</span>
                </div>
                <div class="legend-item">
                    <div class="legend-color" style="background: #45b7d1;"></div>
                    <span>电场线</span>
                </div>
            </div>
        </div>

        <!-- 动画展示区 -->
        <div class="panel animation-panel">
            <h2>电场可视化</h2>
            <canvas id="capacitor-canvas" width="500" height="400"></canvas>
            <div class="tooltip" id="tooltip"></div>
        </div>

        <!-- 物理量与原理说明区 -->
        <div class="panel info-panel">
            <h2>物理量计算</h2>
            
            <div class="physics-display">
                <div class="physics-item">
                    <span class="physics-label">电容 (C):</span>
                    <span class="physics-value" id="capacitance">-- pF</span>
                </div>
                <div class="physics-item">
                    <span class="physics-label">电场强度 (E):</span>
                    <span class="physics-value" id="electric-field">-- kV/m</span>
                </div>
                <div class="physics-item">
                    <span class="physics-label">电势差 (V):</span>
                    <span class="physics-value" id="voltage">-- V</span>
                </div>
                <div class="physics-item">
                    <span class="physics-label">电荷密度 (σ):</span>
                    <span class="physics-value" id="charge-density">-- μC/m²</span>
                </div>
            </div>

            <div class="formula-box">
                <div class="formula-title">关键公式：</div>
                <div>电容：C = ε₀εᵣA/d</div>
                <div>电场强度：E = σ/ε = Q/(εA)</div>
                <div>电势差：V = Ed = Q/C</div>
                <div>电荷密度：σ = Q/A</div>
                <br>
                <div>其中：</div>
                <div>ε₀ = 8.85×10⁻¹² F/m (真空介电常数)</div>
                <div>εᵣ = 相对介电常数</div>
                <div>A = 极板面积</div>
                <div>d = 极板间距</div>
            </div>

            <div class="formula-box">
                <div class="formula-title">物理原理：</div>
                <div>• 平行板电容器由两块平行导体板组成，中间夹有电介质</div>
                <div>• 电场线在极板间均匀分布，边缘存在边缘效应</div>
                <div>• 电介质的存在会增强电容，减小电场强度</div>
                <div>• 电场强度与电荷密度成正比，与介电常数成反比</div>
            </div>
        </div>
    </div>

    <script>
        // 物理常数
        const EPSILON_0 = 8.85e-12; // 真空介电常数 (F/m)
        const MICRO = 1e-6;
        const CENTI = 1e-2;
        const MILLI = 1e-3;

        // 获取DOM元素
        const canvas = document.getElementById('capacitor-canvas');
        const ctx = canvas.getContext('2d');
        const tooltip = document.getElementById('tooltip');

        // 参数输入元素
        const chargeSlider = document.getElementById('charge');
        const areaSlider = document.getElementById('area');
        const distanceSlider = document.getElementById('distance');
        const dielectricSlider = document.getElementById('dielectric');

        // 显示元素
        const chargeValue = document.getElementById('charge-value');
        const areaValue = document.getElementById('area-value');
        const distanceValue = document.getElementById('distance-value');
        const dielectricValue = document.getElementById('dielectric-value');

        // 物理量显示元素
        const capacitanceDisplay = document.getElementById('capacitance');
        const electricFieldDisplay = document.getElementById('electric-field');
        const voltageDisplay = document.getElementById('voltage');
        const chargeDensityDisplay = document.getElementById('charge-density');

        // 动画参数
        let animationId;
        let fieldLines = [];

        // 计算物理量
        function calculatePhysics() {
            const Q = parseFloat(chargeSlider.value) * MICRO; // 库仑
            const A = parseFloat(areaSlider.value) * CENTI * CENTI; // 平方米
            const d = parseFloat(distanceSlider.value) * MILLI; // 米
            const epsilon_r = parseFloat(dielectricSlider.value);

            const epsilon = EPSILON_0 * epsilon_r;
            const C = epsilon * A / d; // 法拉
            const sigma = Q / A; // 库仑/平方米
            const E = sigma / epsilon; // 伏特/米
            const V = E * d; // 伏特

            return {
                capacitance: C,
                electricField: E,
                voltage: V,
                chargeDensity: sigma
            };
        }

        // 更新显示
        function updateDisplay() {
            const physics = calculatePhysics();
            
            capacitanceDisplay.textContent = (physics.capacitance * 1e12).toFixed(2) + ' pF';
            electricFieldDisplay.textContent = (physics.electricField / 1000).toFixed(2) + ' kV/m';
            voltageDisplay.textContent = physics.voltage.toFixed(2) + ' V';
            chargeDensityDisplay.textContent = (physics.chargeDensity / MICRO).toFixed(2) + ' μC/m²';
        }

        // 绘制电容器
        function drawCapacitor() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            const physics = calculatePhysics();
            const Q = parseFloat(chargeSlider.value) * MICRO;
            const A = parseFloat(areaSlider.value);
            const d = parseFloat(distanceSlider.value);
            const epsilon_r = parseFloat(dielectricSlider.value);

            // 计算绘图参数
            const plateWidth = Math.min(300, A * 2); // 根据面积调整宽度
            const plateHeight = 20;
            const plateDistance = Math.min(100, d * 10); // 根据间距调整
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;

            // 绘制上极板（正电荷）
            ctx.fillStyle = '#ff6b6b';
            ctx.fillRect(centerX - plateWidth/2, centerY - plateDistance/2 - plateHeight, plateWidth, plateHeight);
            
            // 绘制下极板（负电荷）
            ctx.fillStyle = '#4ecdc4';
            ctx.fillRect(centerX - plateWidth/2, centerY + plateDistance/2, plateWidth, plateHeight);

            // 绘制电介质
            if (epsilon_r > 1) {
                ctx.fillStyle = `rgba(100, 150, 255, ${(epsilon_r - 1) / 10})`;
                ctx.fillRect(centerX - plateWidth/2 - 10, centerY - plateDistance/2 - 10, 
                           plateWidth + 20, plateDistance + plateHeight * 2 + 20);
            }

            // 绘制电荷符号
            drawCharges(centerX - plateWidth/2, centerY - plateDistance/2 - plateHeight/2, 
                       plateWidth, plateHeight, '+', '#ff6b6b');
            drawCharges(centerX - plateWidth/2, centerY + plateDistance/2 + plateHeight/2, 
                       plateWidth, plateHeight, '-', '#4ecdc4');

            // 绘制电场线
            drawFieldLines(centerX - plateWidth/2, centerX + plateWidth/2, 
                          centerY - plateDistance/2, centerY + plateDistance/2, 
                          physics.electricField);
        }

        // 绘制电荷符号
        function drawCharges(x, y, width, height, symbol, color) {
            ctx.fillStyle = color;
            ctx.font = '12px Arial';
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            
            const chargeCount = Math.min(10, Math.floor(width / 20));
            for (let i = 0; i < chargeCount; i++) {
                const px = x + (i + 0.5) * width / chargeCount;
                ctx.fillText(symbol, px, y);
            }
        }

        // 绘制电场线
        function drawFieldLines(leftX, rightX, topY, bottomY, fieldStrength) {
            const lineCount = Math.min(15, Math.max(5, Math.floor(fieldStrength / 10000)));
            const lineSpacing = (rightX - leftX) / (lineCount + 1);
            
            ctx.strokeStyle = '#45b7d1';
            ctx.lineWidth = 2;
            
            for (let i = 1; i <= lineCount; i++) {
                const x = leftX + i * lineSpacing;
                
                ctx.beginPath();
                ctx.moveTo(x, topY);
                ctx.lineTo(x, bottomY);
                ctx.stroke();
                
                // 绘制箭头
                const arrowY = bottomY - 10;
                ctx.beginPath();
                ctx.moveTo(x - 5, arrowY - 5);
                ctx.lineTo(x, arrowY);
                ctx.lineTo(x + 5, arrowY - 5);
                ctx.stroke();
            }
        }

        // 事件监听器
        function addEventListeners() {
            chargeSlider.addEventListener('input', function() {
                chargeValue.textContent = this.value + ' μC';
                updateDisplay();
                drawCapacitor();
            });

            areaSlider.addEventListener('input', function() {
                areaValue.textContent = this.value + ' cm²';
                updateDisplay();
                drawCapacitor();
            });

            distanceSlider.addEventListener('input', function() {
                distanceValue.textContent = this.value + ' mm';
                updateDisplay();
                drawCapacitor();
            });

            dielectricSlider.addEventListener('input', function() {
                dielectricValue.textContent = this.value;
                updateDisplay();
                drawCapacitor();
            });

            // 鼠标悬停效果
            canvas.addEventListener('mousemove', function(e) {
                const rect = canvas.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                
                // 简单的悬停检测
                const centerX = canvas.width / 2;
                const centerY = canvas.height / 2;
                const plateWidth = 200;
                const plateHeight = 20;
                const plateDistance = 60;
                
                if (Math.abs(x - centerX) < plateWidth/2 && 
                    (Math.abs(y - (centerY - plateDistance/2 - plateHeight/2)) < plateHeight/2 ||
                     Math.abs(y - (centerY + plateDistance/2 + plateHeight/2)) < plateHeight/2)) {
                    
                    const physics = calculatePhysics();
                    tooltip.style.display = 'block';
                    tooltip.style.left = e.clientX + 10 + 'px';
                    tooltip.style.top = e.clientY - 30 + 'px';
                    tooltip.textContent = `电荷密度: ${(physics.chargeDensity / MICRO).toFixed(2)} μC/m²`;
                } else {
                    tooltip.style.display = 'none';
                }
            });

            canvas.addEventListener('mouseleave', function() {
                tooltip.style.display = 'none';
            });
        }

        // 初始化
        function init() {
            updateDisplay();
            drawCapacitor();
            addEventListeners();
        }

        // 启动应用
        init();
    </script>
</body>
</html>